<template>
  <div class="home">
    <button @click="$router.back()">返回</button>
    <ul>
      <li class="item" v-for="(item, index) in dataArray" :key="item.en">
        <p class="chinese" @click="showEnglish(index)">{{index+1}}. {{item.zh}}</p>
        <p class="english" :class="showStyle(index)">{{item.en}}</p>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: '',
  data() {
    return {
      dataArray: [
      ],
      showArray: [],
      // currentIndex: -1
    }
  },
  created() {
    this.dataArray = window.$files(this.$route.query.fp).data
  },
  methods: {
    showEnglish(index) {
      // if (this.currentIndex === index) {
      //   this.currentIndex = -1
      //   return
      // }
      // this.currentIndex = index
      let currentIndex = this.showArray.findIndex(val => val === index)
      if(currentIndex > -1) {
        this.showArray.splice(currentIndex, 1)
      } else {
        this.showArray.push(index)
      }
    },
    showStyle(index) {
      const flag = this.showArray.find(val => val === index)
      return  flag != null ? 'active' : ''
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .item
    padding: 5px
  .chinese
      color: green
      &:hover
        cursor :pointer
  .english
    color: blue
    opacity : 0
    transition : all 0.1s
    &.active
      opacity : 1
</style>
